<template>
  <el-button
    v-if="operateTypesList.includes(OperateTypes.LOCK)"
    type="text"
    @click="onLock"
    :disabled="lockBtnDisabled(row)"
  >
    解锁
  </el-button>
  <el-button
    v-if="operateTypesList.includes(OperateTypes.APPROVAL)"
    type="text"
    @click="action(OperateTypes.APPROVAL, 'lang.operate.approval', row)"
    :disabled="row.flowReply == null || row.status !== 1"
  >
    {{ $t('lang.operate.approval') }}
  </el-button>

  <el-button
    v-if="operateTypesList.includes(OperateTypes.EDIT)"
    type="text"
    @click="action(OperateTypes.EDIT, 'lang.operate.edit', row)"
    :disabled="row.status !== 0"
  >
    {{ $t('lang.operate.edit') }}
  </el-button>
  <el-button
    v-if="operateTypesList.includes(OperateTypes.VIEW)"
    type="text"
    @click="action(OperateTypes.VIEW, 'lang.operate.view', row)"
  >
    {{ $t('lang.operate.detail') }}
  </el-button>
  <confirm
    v-if="operateTypesList.includes(OperateTypes.DELETE)"
    type="button"
    link-type="text"
    info-type="error"
    :text="$t('lang.operate.delete')"
    :title="$t('lang.operate.hint')"
    :content="$t('lang.operate.isDelete')"
    :request-data="() => deleteRecord()"
    :update-data="() => refreshData(true)"
    :disabled="row.status !== 0 || row.dataLock === 1"
  />
</template>

<script lang="ts">
import { OperateTypes } from '@/enums/operateTypes'
import { I18nMessageId, ObjectType } from 'typings/interfaces'
import { computed, defineComponent, PropType } from 'vue'
import Confirm from '@/components/Confirm/index.vue'
// import { useI18n } from 'vue-i18n'
import { useStore } from 'vuex'
import { lockBtnDisabled } from '@/utils/utils'

export default defineComponent({
  props: {
    row: {
      type: Object as PropType<ObjectType>,
      required: true,
    },
    action: {
      type: Function as PropType<
        (types: OperateTypes, message: I18nMessageId, row: ObjectType) => void
      >,
      required: true,
    },
    deleteRecord: {
      type: Function as PropType<() => Promise<any>>,
      required: false,
    },
    lockRecord: {
      type: Function as PropType<(id: string, dataLock: 0 | 1) => Promise<any>>,
      required: false,
    },
    refreshData: {
      type: Function as PropType<(jumpFirstPage?: boolean) => Promise<ObjectType>>,
      required: false,
    },
    operateTypesList: {
      type: Array as PropType<OperateTypes[]>,
      default: [
        OperateTypes.LOCK,
        OperateTypes.APPROVAL,
        OperateTypes.EDIT,
        OperateTypes.VIEW,
        OperateTypes.DELETE,
      ],
    },
  },
  components: {
    Confirm,
  },
  setup(props) {
    const dataLockParams = computed(() => (props.row.dataLock === 0 ? 1 : 0))
    const onLock = () => {
      if (props.lockRecord) {
        props.lockRecord(props.row.id, 0).then(() => props.refreshData && props.refreshData())
      }
    }

    const store = useStore()
    const lockPermsList = computed(() => store.state.global.lockPermsList)

    return {
      OperateTypes,
      dataLockParams,
      onLock,
      lockPermsList,
      lockBtnDisabled,
    }
  },
})
</script>

<style></style>
